<!DOCTYPE html>
<html lang="en" style="font-size: 20px;">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>底部弹出选项卡</title>
    <style>
         *{
            padding: 0;
            margin: 0;
        }
        .head-nav{
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #EEF0F4;
        }

        .list{
            margin: 20px;
        }
        .list ul li{
            list-style: none;
            height: 38px;
            line-height: 38px;
            background: #F7F8FA;
            margin: 10px 0;
            padding: 0px 10px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
        }
        .list ul li:hover{
            background: #EEF0F4
        }


        .customPopup{
            /* position: absolute;
            left: 0rem;
            right: 0rem;
            bottom: 0rem; */
            overflow: hidden;
            height: 100%;
        }
        .customPopup .popup-title{
            padding:0.5rem 0rem;
            text-align: center;
            font-size: 0.8rem;
        }
        .customPopup .popup-list{
            position: absolute;
            left: 0rem;
            right: 0rem;
            bottom: 0rem;
            z-index: 900;
            background: #fff;
            border-top-left-radius: 0.8rem;
            border-top-right-radius: 0.8rem;
        }
        .customPopup .popup-list ul li{
            padding: 0.5rem;
            font-size: 0.7rem;
            list-style: none;
        }
        .customPopup .popup-list ul li:active{
            background: #F9F9FB;
        }
        .customPopup .popup-list .cancel{
            text-align: center;
            background: #FE7000;
            color: #fff;
            margin: 0.5rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
            font-size: 0.8rem;
        }
        .customPopup .default{
            background: rgba(20, 20, 20, 0.8);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: none;
            z-index: 100;
        }

    </style>
</head>
<body>
    <div class="head-nav">
        <div onclick="history.go(-1)">《</div>
        <div>Popup 底部弹出选项卡</div>
        <div></div>
    </div>
    <div class="list">
        <ul>
            <li class="bottomTab">底部弹出选项卡</li>
            <li class="leftTab">左侧弹出选项卡</li>
        </ul>
    </div>

    <div class="customPopup" id="bottomPopup" data-type="bottom">
        <div class="popup-list">
            <div class="popup-title">订单取消</div>
            <ul>
                <li>我不想买了</li>
                <li>信息填写错误，重新拍</li>
                <li>同城见面交易</li>
                <li>其他原因</li>
            </ul>
            <div class="cancel">暂不取消</div>
        </div>
        <div class="default"></div>
    </div>


    


    
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
    // $(function(){
    //     $('.customPopup').css("height",$(".customPopup .popup-list").height())
    //     $('.popup-list').css("bottom",-$(".customPopup .popup-list").height())

    //     // 触发
    //     $(".bottomTab").click(function(){
    //       $(".customPopup .popup-list").animate({
    //             "bottom": "0rem"
    //       },500)
    //       // 选中
    //       $(".popup-list ul").on("click","li",function(event){
    //           let e = event.currentTarget
    //           console.log(e.innerText)
    //           abrogate()
    //       })
    //       $(".default").fadeIn();
    //     })

    //     // 暂不取消
    //     $(".cancel").click(function(){
    //         abrogate()
    //     })

    //     // 关闭页面
    //     function abrogate(){
    //         $(".customPopup .popup-list").animate({
    //             "bottom": -$(".customPopup .popup-list").height()
    //         },500)
    //         $(".default").fadeOut()
    //     }
    // })


  // 自定义底部弹框
  function Popup(id){
      var _this = this;
      this.id = id;
      var container = document.getElementById(id);
      this.list = container.children[0];
      this.leixing = $(`#${id}`).attr("data-type")
      this.listName = `#${id} .popup-list`;
      this.default = `#${id} .default`;

      if(this.leixing == "bottom"){
        this.listHeight = container.children[0].offsetHeight + "px";
        // container.style.height = this.listHeight;
        this.list.style.bottom = "-"+this.listHeight;
      }else if(this.leixing == "left"){
        console.log($(this.listName).width())
      }

      this.list.addEventListener("click",function(event){
          var e = event.target;
          if(e.innerText != '暂不取消'){
            console.log(e.innerText)
            _this.abrogate()
          }
          _this.abrogate()
      })
  }
  // 触发
  Popup.prototype.trigger = function(){
      $(this.listName).animate({
          "bottom": "0px"
      },500)
      $(this.default).fadeIn()
  }
  // 关闭
  Popup.prototype.abrogate = function(){
      $(this.listName).animate({
          "bottom": -$(this.listName).height()
      },500)
      $(this.default).fadeOut()
  } 

  
  var bottomPopup = new Popup("bottomPopup")
  $(".bottomTab").click(function(){
    bottomPopup.trigger()
  })


  
    </script>
</body>
</html>